<link rel="stylesheet" type="text/css" href="/static/calendar/5.10/main.min.css?v=version_0.2" />
<script type="text/javascript" src="/static/calendar/5.10/main.min.js?v=version_0.2"></script>
<link rel="stylesheet" href="/static/eicon/iconfont.css?v=version_0.2">

<style>
    #list_box {
        height: calc(100% - 80px);
        margin-top: 20px;
        margin-left: 20px;
        width: 250px;
    }

    #page_box {
        margin-top: 20px;
        margin-left: 20px;
        height: calc(100% - 80px);
        width: calc(100% - 350px);
    }


    .page_box_style {
        border: 1px solid #f2f2f2;
        box-shadow: 0 0 2px #888;
        border-radius: 10px;
        padding: 15px;
        background: white;
        display: inline-block;
        height: 100%;
        width: 100%;
    }

    /* 小于适应 */
    @media screen and (max-width:1000px) {
        #page_box {
            display: none;
        }

        #list_box {
            width: 100%;
            margin: 0 auto;
            display: inline-block;
            margin-top: 20px;
        }

        .obj-list-box {
            width: 80%;
            margin: 0 auto;
        }
    }
</style>

<div>
    <!-- 项目列表 -->
    <div id="list_box" class="layui-inline"></div>
    
    <!-- 日历内容 -->
    <div id="page_box" class="layui-inline">
        <!-- 默认显示空内容 -->
        <div class="page_box_style">
            <style>
                .text {
                    text-align: center;
                    font-weight: 800;
                    color: #a1a1a1;
                }
            
                .center-vertical {
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);
                }
            
                .center-horizontal {
                    position: relative;
                    left: 50%;
                    transform: translateX(-50%);
                }
            </style>
            <div class="center-vertical">
                <h1 class="nothing text">什么都没有</h1>
                <h4 class="text">请单击左侧项目查看详情</h4>
            </div>
        </div>
    </div>
    
</div>

<script type="text/javascript">
    layui.use(['layer', 'jquery'], function () {
        var $ = layui.jquery
            , layer = layui.layer;
        var obj_id = app.parseUrl().params.obj_id;

        if(obj_id){
           openInsideProject(obj_id)
        }

        app.base.setTitle('日历记事本');

        // 左侧列表
        app.runTpl("objectList", {
            elem: "#list_box",
            onItemClick: function (item) {
                // 小于1000px将采用新窗口打开
                if($(window).width()<1000){
                    // console.log('新创打开')
                    app.go(app.base.route.fullContent+'?obj_id=' + item.obj_id)
                }else{
                    // console.log('页内打开', app.parseUrl().path)
                    app.go(app.parseUrl().path + '?obj_id=' + item.obj_id)
                }
            }
        })

        // 监听地址变化
        app.eventRegister('routeChange',function(new_route,old_route){
            // console.log("路由改变",new_route, old_route);
            // 判断是否只改变了参数
            if(new_route==old_route && old_route==app.base.route.home){
                openInsideProject(app.parseUrl().params.obj_id)
                return false;// 阻止跳转
            }
        })

        // 右侧项目内容
        function openInsideProject(obj_id){
            app.runTpl("objectContent", {
                elem: ".page_box_style",
                objId: obj_id,
                leftButtons: [
                    {
                        name: 'full-screen',
                        hint: '全屏',
                        icon:' custom-button layui-icon-screen-full',
                        onClick: function () {
                            app.go(app.base.route.fullContent + '?obj_id=' + obj_id)
                        }
                    }
                ]
            })
        }

        
        
    })
</script>